<template>
  <div class="chart-container">
    <!-- <chart height="100%" width="100%" /> -->
    <div
          id="zhuzhuang"
          style="height: 100%; width: 100%"
    ></div>
  </div>
</template>

<script>
import Chart from '@/components/Charts/LineMarker'
// import { mount } from 'node_modules/_@vue_test-utils@1.0.0-beta.29@@vue/test-utils/types'

export default {
  name: 'LineChart',
  components: { Chart },
  mounted(){
    this.getZhuzhuang();
  },
  methods:{
    getZhuzhuang() {
      var myEcharts = this.$echarts.init(document.getElementById("zhuzhuang"));
      //指定图表的配置项和数据
      var option = {
        color: ["#61a0a8"],
        title: {
          text: "球队得分图",
          left: "10px",
          top: "10px",
          textStyle: {
            color: "black",
          },
        },
        xAxis: {
          type: "category",
          data: [
            "鲁能",
            "恒大",
            "北京国安",
            "皇马",
            "富力",
            "联盛",
            "申花",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [1, 1, 3, 5, 1, 0, 2],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };
      myEcharts.setOption(option);
    },
  }
}
</script>

<style scoped>
.chart-container{
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
}
</style>

